<template>
    <el-aside :width="asideWidth">
        <div class="tab" @click="tabSwitch">|&nbsp;|&nbsp;|</div>
        <el-menu
                router
                unique-opened
                :collapse="isSwitch"
                :collapse-transition="false"
                text-color="white"
                class="el-menu-vertical-demo"
                background-color="#545c64"
                active-text-color="#ffd04b">
<!--            一级菜单-->
            <el-submenu :index="item.id + ''" v-for="(item,index) in message" :key="index">
                <template slot="title">
                    <i :class="menuIcon[index]"></i>
                    <span>{{item.authName}}</span>
                </template>
<!--                二级菜单-->
                <el-menu-item :index="'/' + items.path" v-for="(items,indexs) in item.children" :key="indexs"
                >
                    <template slot="title">
                        <i class='iconfont icon-houtaishangpinguanli'></i>
                        <span>{{items.authName}}</span>
                    </template>
                </el-menu-item>
            </el-submenu>
        </el-menu>
    </el-aside>
</template>

<script>
    export default {
        name: "HomeSide",
        props:{
            message:{
                type:Array
            }
        },
        data(){
            return{
                isSwitch:false,
                asideWidth:"140px",
                menuIcon:[
                    'iconfont icon-LC_icon_user_group_fill',
                    'iconfont icon-fenghuangxiangmutubiao_quanxian',
                    'iconfont icon-shangpinguanli',
                    'iconfont icon-dingdanguanli',
                    'iconfont icon-shujutongji',
                ]
            }
        },
        methods: {
            tabSwitch(){
                this.isSwitch = !this.isSwitch;
            },
            tabSwitchHeader(){
                if(this.asideWidth === '0px'){
                    this.asideWidth = '140px'
                }else{
                    this.asideWidth = '0px'
                }
            }
        },
        created() {
            this.$bus.$on('switch',this.tabSwitchHeader)
        }
    }
</script>

<style scoped lang="less">
    .el-aside{
        height: calc(100vh - 60px);
        background-color: #545c64;
        .tab{
            font-size: 1.8rem;
            color: #cccccc;
            display: none ;
            justify-content: center;
            margin: 5px 0;
        }
    }
    .el-menu{
        border-right: 0;
    }

    @media only screen and(min-width: 1200px) {
        .el-aside{
            .tab{
                font-size: 0.7rem;
                cursor: context-menu;
                display: block;
                text-align: center;
            }
        }
    }
</style>